<template>
   <div>
     <!--导航栏-->
     <div class="a2">
       <div class="a7">
         <div class="a3">
           <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
           <div class="a5">
             <button class="a5a">
               <router-link :to="'Home'">首页</router-link>
             </button>
             <button class="a5a">
               <router-link :to="'MyActive'">我的活动</router-link>
             </button>
             <button class="a5a">
               <router-link :to="'MyTribe'">我的部落</router-link>
             </button>
             <button class="a5a">
               <router-link :to="'MyInfo'">个人信息</router-link>
             </button>
             <button class="a5a">
               <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
             </button>
             <button class="a5a">APP下载</button>
           </div>
           <div class="a6">
             <div style="width: 300px"></div>
             <div class="a6a"></div>
             <div class="a6a"></div>
             <div class="a6aa"></div>
           </div>
         </div>
       </div>
     </div>

     <!--部落信息-->
     <div class="m1">

       <el-card style="margin: auto 130px;width: 1210px">
         <div class="m2">
           <div class="m6"><div><img :src="tribeDetail.photopath" height="350" width="350"/></div></div>
           <div class="m3">
             <div style="margin-top: 70px;">
               <div class="m4" style="font-size: 25px;font-weight: bold">{{tribeDetail.name}}</div>
               <div class="m4">名称：{{tribeDetail.name}}</div>
               <div class="m4">人数：{{tribeDetail.count}}</div>
               <div class="m4">介绍：{{tribeDetail.produce}}</div>
               <div class="m7">
                 <button v-if="this.sid == 1" class="m8" @click="joinTribe(tribeDetail.id)">加入部落</button>
                 <button v-if="this.sid == 2" class="m8" @click="exits(tribeDetail.id)">退出部落</button>
               </div>
             </div>
           </div>
         </div>
       </el-card>

       <el-dialog title="填写加入理由" :visible.sync="dialogFormVisible" @close="reset">


         <el-input v-model="reason" auto-complete="off" ></el-input>


         <div slot="footer" class="dialog-footer">
           <el-button @click="reset" style="color: black">取 消</el-button>
           <el-button type="success" @click="saveJoin" style="color: black">确 定</el-button>
         </div>
       </el-dialog>

     </div>

   </div>
</template>

<script>
    import {exit} from "shelljs";

    export default {
        name: "TribalDetails",
      data() {
        return {
          sid: 0,
          id: 0,
          tribeDetail:{},
          dialogFormVisible:false,
          reason:'',
          user:{},
          tid:'',
          uid:''


        };
      },
      methods:{

          getTribeDetailList(id){
            this.$axios.post('/tribe/listById?id='+id).then(resp=>{
                this.tribeDetail=resp.data
            })

          },
        joinTribe(id){
          this.dialogFormVisible=true
          this.tid=id
          this.uid=this.user.id

        },

        exits(id){
          this.$axios.post('/tribeMessage/exits?tid='+id+"&uid="+this.user.id).then(resp=>{
            if (resp.data.code==200){
              this.$message.success("退出成功")
              this.$router.push("/front/MyTribe")
            }else{
              this.$message.error("失败");
            }


          })

        },
        reset(){
          this.dialogFormVisible=false
          this.reason=''
          this.tid=''
          this.uid=''
        },
        saveJoin(){
            this.$axios.post('/tribeMessage/joinTribe?tid='+this.tid+"&uid="+this.uid+"&reason="+this.reason).then(resp=>{
              if (resp.data.code==200){
                this.$message.success("已发送申请")
                this.reset()
              }else{
                this.$message.error(resp.data.message)
                this.reset()
              }
            })


        }
      },
      created() {
        this.user=JSON.parse(sessionStorage.getItem("user1"))
        this.sid = this.$route.query.sid;
        this.id = this.$route.query.id;
        console.log("this.sid",this.sid)
        console.log("this.id",this.id)
        this.$nextTick(() => {
          this.getTribeDetailList(this.id);
        });
      }

    }
</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  .d9>button>a{
    color: white;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;

    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .m1{
    margin-top: 100px;
    position: absolute;
  }
  .m2{
    width: 1210px;
    height: 500px;
    display: flex;
    justify-content: space-between;
  }
  .m3{
    width: 600px;
  }
  .m6{
    width: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
   }
  .m4{
    margin-top: 50px;
  }
  .m7{
    margin-top: 70px;
    margin-left: 150px;
  }
  .m8{
    height: 40px;
    width: 100px;
    color: white;
    border-radius: 15px;
    background-color: orange;
    cursor: pointer;
  }
</style>
